<template>
	<view class="container">
		<uni-notice-bar text="提示：添加时请摸亮门锁密码键盘。" />
		<view class="list" v-if="lockList.length > 0">
			<block v-for="item in lockList" :key="item.MAC">
				<view class="box" hover-class="hoverClass" v-if="item.isSettingMode" @click="handleInitLock(item)">
					<view class="info">
						<view class="icon">
							<uni-icons custom-prefix="iconfont" type="icon-lock" size="20" color="#3a3a3a"></uni-icons>
						</view>
						<view class="name">
							{{ item.deviceName }}
						</view>
					</view>
					<uni-icons type="plus" size="20" color="#2979ff"></uni-icons>
				</view>
				<view class="box unclick" v-else @click="unclickLock">
					<view class="info">
						<view class="icon">
							<uni-icons custom-prefix="iconfont" type="icon-lock" size="20" color="#909399"></uni-icons>
						</view>
						<view class="name">
							{{ item.deviceName }}
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="empty" v-else>
			<image class="image" src="@/static/img/empty.png" mode="aspectFit"></image>
			<view class="emptyWord">暂无设备</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
const plugin = requirePlugin('ttLock');
export default {
	data() {
		return {
			FormData: {
				lock_data: '',
				lock_name: '',
				group_id: ''
			},
			lockList: [],
			state: ''
		};
	},
	onLoad(e) {
		this.FormData.lock_name = e.name;
		this.FormData.group_id = e.id;
	},
	onShow() {
		this.startSearch();
	},
	onHide() {
		this.handleStopAllOperations();
	},
	onUnload() {
		this.handleStopAllOperations();
	},
	methods: {
		// 搜索智能锁
		startSearch() {
			uni.showNavigationBarLoading();
			this.lockList = [];
			plugin.startScanBleDevice(
				(lockDevice, lockList) => {
					this.lockList = lockList;
				},
				(err) => {
					this.handleStopAllOperations();
					uni.showToast({
						icon: 'none',
						title: err.errorMsg
					});
				}
			);
		},
		unclickLock() {
			uni.showToast({
				icon: 'none',
				title: '智能锁不可添加'
			});
		},

		// 初始化智能锁
		handleInitLock(item) {
			if (!item.isSettingMode) {
				this.unclickLock();
				return false;
			}
			uni.showLoading({
				title: '初始化中...'
			});
			plugin
				.getLockVersion(item, (res) => {})
				.then((res) => {
					if (res.errorCode === 0) {
						// 调用添加锁接口
						plugin
							.initLock(item, (res) => {})
							.then((res) => {
								if (res.errorCode === 0) {
									uni.showLoading({
										title: '同步数据中...'
									});
									this.FormData.lock_data = res.lockData;
									api.lockInit(this.FormData).then((res) => {
										if (res.data.info) {
											uni.hideLoading();
											uni.showToast({
												title: '添加成功'
											});
											setTimeout(() => {
												uni.navigateBack({
													delta: 2
												});
											}, 1000);
										}
									});
								} else {
									uni.showToast({
										icon: 'none',
										title: '初始化智能锁失败'
									});
								}
							});
					} else {
						uni.showToast({
							icon: 'none',
							title: '初始化智能锁失败'
						});
					}
				});
		},
		// 停止所有蓝牙操作，并退出操作中状态
		handleStopAllOperations() {
			plugin.stopAllOperations();
			uni.hideNavigationBarLoading();
		}
	}
};
</script>

<style lang="scss">
.container {
	.list {
		padding: 20rpx;
		.box {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;
			.info {
				display: flex;
				align-items: center;
				.icon {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
					border: 1rpx solid $uni-border-4;
					margin-right: 20rpx;
				}
				.name {
					font-size: 28rpx;
					font-weight: bold;
				}
			}
			&.unclick {
				background-color: #f1f1f1;
				color: $uni-secondary-color;
			}
		}
	}
}
</style>
